'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _icons = require('@ant-design/icons');

var _icons2 = _interopRequireDefault(_icons);

var _popover = require('antd/lib/popover');

var _popover2 = _interopRequireDefault(_popover);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

var _reactColor = require('react-color');

var _utils = require('../../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Color = function (_React$Component) {
  (0, _inherits3['default'])(Color, _React$Component);
  (0, _createClass3['default'])(Color, null, [{
    key: 'getDerivedStateFromProps',
    value: function getDerivedStateFromProps(props, _ref) {
      var prevProps = _ref.prevProps;

      var nextState = {
        prevProps: props
      };
      if (prevProps && prevProps.color !== props.color) {
        nextState.color = props.color;
      }
      return nextState;
    }
  }]);

  function Color(props) {
    (0, _classCallCheck3['default'])(this, Color);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Color.__proto__ || Object.getPrototypeOf(Color)).call(this, props));

    _this.onMouseDown = function (e) {
      // 渐变条没有样式，取上级样式，有个预览小块，用 style 判断；
      var isWhite = (0, _utils.getParentNode)(e.target, ['saturation-white', 'flexbox-fix', ''], true);
      if (isWhite) {
        _this.isColorDown = true;
      }
    };

    _this.onMouseUp = function (e) {
      if (_this.isColorDown) {
        var domStyle = e.target.style;
        // react-color 里的预览小块，无法判断，用 style 判断;
        var noPreviewDom = !(domStyle.background && domStyle.right === '0px' && domStyle.top === '0px' && domStyle.left === '0px' && domStyle.bottom === '0px' && domStyle.borderRadius === '2px' && domStyle.position === 'absolute' && domStyle.boxShadow);
        _this.isColorDown = false;
        if (noPreviewDom) {
          _this.props.onChange(_this.state.color);
        }
      }
    };

    _this.getColorPicker = function () {
      var color = _this.state.color;
      // react-color 没有 mouseup 事件，加在外层；

      return _react2['default'].createElement(
        'div',
        { key: 'picker',
          onMouseDown: _this.onMouseDown
        },
        _react2['default'].createElement(_reactColor.SketchPicker, {
          color: color && (0, _utils.isColor)(color) ? color : 'rgba(0,0,0,1)',
          presetColors: ['#f04134', '#00a854', '#108ee9', '#f5317f', '#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#222222', '#404040',
          // '#5a5a5a',
          '#919191', '#bfbfbf', '#d9d9d9', '#e9e9e9',
          // '#f5f5f5',
          // '#f7f7f7',
          '#fbfbfb', 'transparent'],
          onChange: _this.colorHandleChange
        })
      );
    };

    _this.colorHandleChange = function (value) {
      var rgb = value.rgb;
      var color = rgb.a === 1 ? value.hex : 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + rgb.a + ')';
      _this.setState({
        color: color
      }, function () {
        if (!_this.isColorDown) {
          _this.props.onChange(color);
        } else {
          _this.props.onChange(color, true);
        }
      });
    };

    _this.closeColorPicker = function () {
      _this.setState({
        showPicker: false
      });
    };

    _this.handleVisibleChange = function (showPicker) {
      _this.setState({ showPicker: showPicker });
    };

    _this.inputBlur = function (e) {
      var target = e.target;
      if (_this.props.color !== target.value) {
        _this.props.onChange(target.value);
      }
    };

    _this.inputChange = function (e) {
      var target = e.target;
      _this.setState({
        color: target.value
      });
    };

    _this.removeColor = function () {
      if (_this.props.color !== 'initial') {
        _this.props.onChange('initial');
      }
    };

    _this.state = {
      showPicker: false,
      color: props.color
    };
    return _this;
  }

  (0, _createClass3['default'])(Color, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      window.addEventListener('mouseup', this.onMouseUp);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          title = _props.title,
          onChange = _props.onChange,
          type = _props.type,
          span = _props.span,
          props = (0, _objectWithoutProperties3['default'])(_props, ['title', 'onChange', 'type', 'span']);
      var color = this.state.color;

      var className = (0, _classnames3['default'])({
        'editor-color': true,
        active: this.state.showPicker
      });
      var children = _react2['default'].createElement(
        _popover2['default'],
        {
          title: false,
          content: this.getColorPicker(),
          trigger: 'click',
          visible: this.state.showPicker,
          onVisibleChange: this.handleVisibleChange,
          overlayClassName: 'editor-list-popover'
        },
        _react2['default'].createElement(
          'a',
          {
            className: className,
            style: { background: '#fff url(' + _utils.alphaBg + ')' }
          },
          _react2['default'].createElement(
            'i',
            {
              style: { background: color },
              className: '' + (!color || color === 'initial' ? 'no-color' : '')
            },
            (!color || color === 'initial') && _react2['default'].createElement(
              'svg',
              { width: '100%', height: '100%', viewBox: '0 0 60 20', id: 'no-color', preserveAspectRatio: 'none' },
              _react2['default'].createElement(
                'g',
                { id: 'Page-1' },
                _react2['default'].createElement('path', { d: 'M0.5,19.5 L59.5,0.5', id: 'Line', stroke: '#FF0000' })
              )
            )
          )
        )
      );
      var classNameWrapper = (0, _classnames3['default'])((0, _defineProperty3['default'])({
        'editor-color-wrapper': true
      }, props.className, true));
      if (this.props.type === 'cut') {
        return _react2['default'].createElement(
          'div',
          (0, _extends3['default'])({}, props, { className: classNameWrapper }),
          children,
          _react2['default'].createElement(
            'span',
            { className: 'color-close', onClick: this.removeColor },
            _react2['default'].createElement(_icons2['default'], { type: 'close' })
          )
        );
      }

      return _react2['default'].createElement(
        _row2['default'],
        (0, _extends3['default'])({}, props, { className: classNameWrapper }),
        _react2['default'].createElement(
          _col2['default'],
          { span: span[0] },
          this.props.title
        ),
        _react2['default'].createElement(
          _col2['default'],
          { span: span[1], style: { position: 'relative' } },
          children
        ),
        _react2['default'].createElement(
          _col2['default'],
          { span: span[2] },
          _react2['default'].createElement(_input2['default'], {
            value: color,
            onBlur: this.inputBlur,
            onPressEnter: this.inputBlur,
            onChange: this.inputChange,
            size: 'small',
            placeholder: 'Add color'
          })
        )
      );
    }
  }]);
  return Color;
}(_react2['default'].Component);

Color.propTypes = {
  className: _propTypes2['default'].string,
  title: _propTypes2['default'].any,
  color: _propTypes2['default'].string,
  onChange: _propTypes2['default'].func,
  type: _propTypes2['default'].string,
  span: _propTypes2['default'].array,
  gutter: _propTypes2['default'].number
};
Color.defaultProps = {
  title: '颜色',
  onChange: function onChange() {},
  span: [3, 9, 12],
  gutter: 8
};
exports['default'] = Color;
module.exports = exports['default'];